<?include_once('conn.php');?>
<?include_once('inc_head.php');?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?
$act=$_GET['act'];
$series=isset($series)?$series:0;
$listTable = TABLE_C."vote_scope";

#/////////////////////////删除/////////////////////

?>

<body>
	<?local("园区（域）管理");?>
<div id="intro">
<!-------------------------------------默认状态------------------------------------->
<div class="admin-main">

	<!-- 快捷操作 -->
	<blockquote class="layui-elem-quote layui-quote-nm">
		<form class="layui-form">
			<div class="layui-form-item">
				<div class="layui-input-inline">
				<a class="layui-btn layiu-btn-primary layui-btn-radius" id="JS-openAdd" data-title="添加"> <i class="layui-icon">&#xe608;</i> 添加园区</a>
				</div>
				<div class="layui-input-inline">
				<select name="province" class="layui-select" id="province" lay-verify="required" lay-filter="province">
					<option value="">请选择省份</option>
				</select>
				</div>
				<div class="layui-input-inline">
				<select name="city" class="layui-select" id="city" lay-verify="required" lay-filter="city">
					<option value="">请选择市</option>
				</select>
				</div>
				<div class="layui-input-inline">
				<select name="area" class="layui-select" id="area" lay-verify="required" lay-filter="area">
					<option value="">请选择县区</option>
				</select>
				</div>
				<div class="layui-input-inline">
					<a class="layui-btn layiu-btn-primary layui-btn-radius" id="JS-search" data-title="添加"> <i class="layui-icon">&#xe666;</i>筛选</a>
				</div>
			</div>
		</form>
	</blockquote>

	<!-- 表格数据 -->
	<table id="demo" lay-filter="myTable"></table>
	<!-- 表格工具 -->
	<script type="text/html" id="toolbarDemo">
	  <div class="layui-btn-container">
	    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
	  </div>
	</script>
	<!-- 列工具 -->
	<script type="text/html" id="titleTpl">
		暂无操作功能
 		<button  class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i></button>
 		<button  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i></button>
	</script>
</div>
<!-- ***********************************脚本区域************************************* -->
<script src="./plugins/layui/layui.all.js"></script>
<script src="./js/vbyzc.js"></script>
<script>
	// 初始化
	const API_LIST          = API_SCOPE_LIST ;//数据列表
	const API_DEL           = API_SCOPE_DEL;            //删除api
	const URL_TARGET_DETAIL = 'admin_scope_detail.php';  //详细
	const URL_TARGET_ADD    = 'admin_scope_add.php';     //添加页面
	const URL_TARGET_EDIT   = 'admin_scope_edit.php';    //编辑页面
	const DTABLE_HEIGHT     = 'full-220';            //数据表格的高度，每个页面独自配置，可以指定数字，full代表100%
	const DTABLE_LIMIT      = 10;                    //每页条数

	// 表单验证
	form.on('submit(formDemo)', function(data){
		layer.msg(JSON.stringify(data.field));
		return false;
	});


	//数据表格
	var table = layui.table;
	tableConfig = {
		elem    : '#demo',
		toolbar : '#toolbarDemo',
		loading : true,
		unresize: true,
		page    : true,
		height  : DTABLE_HEIGHT,
		url     : API_LIST,
		limit   : DTABLE_LIMIT,
		cols: [[
			// {fixed: 'left',checkbox: true},
			{title: 'ID',width:70, field:'id', sort: false, fixed: 'left'},
			{title: '标题',field:'name',templet:"<span>{{d.name}}<span>"},
			{title: '所属市',width:150,field: 'city_name'},
			{title: '所属行正区域',width:150,field: 'area_name'},
			{title: '所属行正区域编码',width:150,field: 'areaid'},
			{title: '操作', width: 200, toolbar: '#titleTpl'}
		]],
		done:function(){
			console.log('表格渲染完成');
			lightbox();//绑定相册插件
		}
	};
	var tableIns = table.render(tableConfig);

	// 执行队列
	pm(resolve => resolve())
	.then(()=>{
		return pm(
			(resolve)=>{
				// 加载省份
				vtool.ajax({
					type: 'GET', url : API_ADDR_PROVINCE, data: {},
					cb:(res)=>{
						console.log(res)
						res.dataList.forEach(item =>{ $("#province").append("<option value="+item.provinceid+">"+item.name+"</option>"); });
						form.render();
						resolve()
					}
				})
			}
		)
	})
	.then(()=>{ return pm( (resolve)=>{ resolve() } ) })
	.then(()=>{ console.log('执行完成') })

	//监听表格工具栏
	table.on('toolbar(myTable)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'delete':
			// console.log("要删除这些行：",checkStatus.data) //获取选中行的数据
			// console.log("选择行数：",checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
			// console.log("表格是否全选：",checkStatus.isAll ) //表格是否全选
			//序列化选择的id
			let idArr = [];
			checkStatus.data.forEach(function(item,index){
				idArr.push(item.id);
			});
			
			/*发送请求*/
			layer.confirm('真的批量删除选中的行吗？', function(index) {
				layer.msg('目前不开放删除功能')
				// vtool.ajax({
				// 	type:'POST',
				// 	url:API_DEL,
				// 	data:{ids:idArr.join(',')},
				// 	cb:function(res){
				// 		layer.msg(res.msg)
				// 		tableIns.reload()
				// 	}
				// })
				layer.close(index);
			});
	    break;
	  };
	});

	

	//监听列工具条
	table.on('tool(myTable)', function(obj) {
		var data = obj.data;
		var layEvent = obj.event;
		//判断事件
		if (layEvent === 'detail') {
			console.log('查看详细:', data)
			vtool.openUrlLayer({
				title: "查看",
				content: URL_TARGET_DETAIL + '?id=' + data.id
			});
		} else if (layEvent === 'del') {
			console.log('删除:', data)
			layer.confirm('真的删除行么', function(index) {
				layer.msg('目前不开放删除功能')
				// vtool.ajax({
				// 	type:'GET',
				// 	url:API_DEL,
				// 	data:{id:data.id},
				// 	cb:function(res){
				// 		layer.msg(res.msg)
				// 		obj.del()
				// 	}
				// })
				layer.close(index);
			});
		} else if (layEvent === 'edit') {
			console.log('编辑:', data)
			vtool.openUrlLayer({
				title: "编辑",
				content: URL_TARGET_EDIT + '?id=' + data.id,
				end:function(){
					tableIns.reload();
				}
			});
			// obj.update({username: '123'});
		}
	});

	//监听排序事件 .
	table.on('sort(myTable)', function(obj){ 
		tableIns.reload({
			initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
			,where: { 
				field: obj.field,order: obj.type //排序方式
			}
		});
	});

	// 省份下拉菜单事件
	form.on('select(province)', function(data){
		const provinceid = data.value
		console.log(provinceid)
		vtool.ajax({
			type: 'GET', url : API_ADDR_CITY, data: {provinceid},
			cb:(res)=>{
				$("#city").html('<option value="">请选择市</option>');
				res.dataList.forEach(item =>{ 
					$("#city").append("<option value="+item.cityid+">"+item.name+"</option>"); 
				});
				form.render();
			}
		})
	});

	// 城市下拉菜单事件
	form.on('select(city)', function(data){
		const cityid = data.value
		console.log(cityid)
		vtool.ajax({
			type: 'GET', url : API_ADDR_AREA, data: {cityid},
			cb:(res)=>{
				$("#area").html('<option value="">请选县区</option>');
				res.dataList.forEach(item =>{
					$("#area").append("<option value="+item.areaid+">"+item.name+"</option>"); 
				});
				form.render();
			}
		})
	});

	//*************************绑定额外的按钮事件 *****************************************
	$(document).on("click","#JS-openAdd",function(){
		vtool.openUrlLayer({
			title:$(this).data('title'),
			content:URL_TARGET_ADD,
			end:function(){
				tableIns.reload();
			}
		});
	})
	$(document).on("click","#JS-search",function(){
		if($("#area").val()){
			tableIns.reload({
				where:{
					areaid:$("#area").val(),
				}
			});
		}else{
			layer.msg('请选择县区',{icon:2,time:1000});
		}
		
	})
</script>
</div>
<?include('inc_foot.php');?>
</body>
</html>